<template>
  <!--应收款分析-->
  <div className="com-threemoisten" ref="threemoistenRef" style="width: 50vw;height:308px;">

  </div>

</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      myChartname: null, // 图表对象
      standardsize: 1 // 全局标准值
    }
  },

  mounted () {
    // 挂载图标
    this.initChart()
    window.addEventListener('resize', this.screenAdapter)
    // 屏幕适配
    this.screenAdapter()
  },
  destroyed () {
    // 移除监听
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化图表
    initChart () {
      this.myChartname = echarts.init(this.$refs.threemoistenRef)
      // 图表基础配置
      var option = {
        title: {
          text: 'line图'
        },
        legend: {
        // Try 'horizontal'
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
        tooltip: {},
       xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {
            data: [10, 22, 28, 43, 49],
            type: 'line',
            stack: 'x',
            areaStyle: {},
            smooth: true
            },
            {
            data: [5, 4, 3, 5, 10],
            type: 'line',
            stack: 'x',
            areaStyle: {},
            smooth: true
            }
        ]
      }
      // 设置数据
      this.myChartname.setOption(option)
    },
    // 获取数据
    getData () {

    },
    // 更新图表
    updataChart () {
      // 设置请求的数据
      var upoption = {

      }
      this.myChartname.setOption(upoption)
    },
    // 屏幕适配
    screenAdapter () {
      this.standardsize = this.$refs.threemoistenRef.offsetWidth / 335
      const adapterOption = {}
      this.myChartname.setOption(adapterOption)
      // 手动调用图表对象resize
      this.myChartname.resize()
    }
  }

}
</script>
<style>
.com-threemoisten {
  background: #759aa0;
}
</style>